{extend name="layout" /}

{block name="page-header"}{/block}

{block name="content"}

<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    *:before,
    *:after {
        box-sizing: border-box;
    }

    ul,
    li {
        list-style: none;
    }

    .l_tree_container {
        width: 100%;
        height: 100%;
        box-shadow: 0 0 3px #ccc;
        margin: 13px;
        position: relative;
    }

    .l_tree {
        width: calc(100% - 44px);
        height: 100%;
        padding-left: 42px;
    }

    .l_tree_branch {
        width: 100%;
        height: 100%;
        display: block;
        padding: 13px;
        position: relative;
    }

    .l_tree_branch .l_tree_children_btn {
        width: 19px;
        height: 19px;
        background-color: #3c434d;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        outline: none;
        border: 0;
        cursor: pointer;
    }

    ul.l_tree:before {
        content: '';
        border-left: 1px dashed #999999;
        height: calc(100%);
        position: absolute;
        left: 10px;
        top: 0px;
    }

    .l_tree .l_tree_branch:last-child::before {
        content: '';
        width: 3px;
        height: calc(100% - 24px);
        display: block;
        background-color: #ffffff;
        position: absolute;
        bottom: 0;
        left: -34px;
    }

    .l_tree,
    .l_tree_branch {
        position: relative;
    }

    .l_tree_branch::after {
        content: '';
        width: 40px;
        height: 0;
        border-bottom: 1px dashed #000;
        position: absolute;
        right: calc(100% - 9px);
        top: 22px;
    }

    .l_tree_container>.l_tree::before,
    .l_tree_container>.l_tree>.l_tree_branch::after {
        display: none;
    }
</style>
<div class="row">
    <div class="col-md-12">
        <div class="block">
            <div class="block-content tab-content">
                <div class="tab-pane active">
                    <div id="demo">
                        <div class="l_tree_container">
                            <ul class="l_tree">
                                {foreach name="$agent" item="vo" key="k" }
                                <li class="l_tree_branch">

                                    <div class="l_tree_click">
                                        <button type="button" class="l_tree_children_btn">-</button>
                                        <span class="l_folder">{:get_user_nickname($vo['id'])}(1级)</span>
                                    </div>
                                    {notempty name="$vo['pid']"}
                                    <ul class="l_tree">
                                        {foreach name="$vo['pid']" item="vos" key="ks" }
                                        <li class="l_tree_branch">

                                            <div class="l_tree_click">
                                                <button type="button" class="l_tree_children_btn">-</button>
                                                <span class="l_folder">{:get_user_nickname($vos['id'])}(2级)</span>
                                            </div>

                                            {notempty name="$vos['pid']"}
                                            <ul class="l_tree">

                                                {foreach name="$vos['pid']" item="voss" key="kss" }
                                                <li class="l_tree_branch">
                                                    <div class="l_tree_click">
                                                        <span
                                                            class="l_folder">{:get_user_nickname($voss['id'])}(3级)</span>
                                                    </div>
                                                </li>
                                                {/foreach}

                                            </ul>
                                            {/notempty}

                                        </li>
                                        {/foreach}
                                    </ul>
                                    {/notempty}

                                </li>
                                {/foreach}

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{/block}

{block name="script"}

{/block}